<template>
  <div class='Nav'>
          <div class="logo">
             我是Logo
          </div>
         <div class="right">
            <div class="about"> 我about</div>
            <div class="profile"> 归档</div>
            <div class="toggle"> 切换</div>
            <div class="contact"> 联络</div>
         </div>

</div>
</template>

<script>
export default {
name:'nav'
}
</script>

<style Lang='less' scoped>
    .Nav{
        height: 100%;
        height: 30px;
        color: rgb(226, 159, 159);
        width: 100%;
        position: fixed;
        top: 0;
        box-shadow:  0 1px 5px 1px rgb(61, 61, 61);
        z-index: 9999;
    }
 .logo{
     line-height: 35px;
     display: inline-block;
 }
    .right{
        height: 100%;
        width: 50%;
        display: flex;
    }
    .right div{
        border: 1px solid beige;
        line-height: 30px;
        flex: 1;
        text-align: center;
        border-radius: 3px;
        margin-left: 1px;
    }
</style>